<!-- directive:title 烟雾效果 demo -->
<!-- directive:breadcrumb 烟雾效果 -->
<div class="panel-body">
    <div class="yanwubody">
        <span>w</span><span>w</span><span>w</span><span>&nbsp;</span><span>1</span><span>7</span><span>s</span><span>u</span><span>c</span><span>a</span><span>i</span><span>&nbsp;</span><span>c</span><span>o</span><span>m</span>
    </div>
    <style type="text/css" ui-bs>
        .yanwubody { background: #ddd; overflow: hidden; font: 5vw/20vh "Finger Paint"; text-align: center; color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
        .yanwubody span { display: inline-block; text-shadow: 0 0 0 #000; -webkit-animation: smoky 5s 3s both; animation: smoky 5s 3s both; }
        .yanwubody span:nth-child(even) { -webkit-animation-name: smoky-mirror; animation-name: smoky-mirror; }
        @-webkit-keyframes smoky { 60% { text-shadow: 0 0 40px #000; } to { -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5); transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5); text-shadow: 0 0 20px #000; opacity: 0; } }
        @keyframes smoky { 60% { text-shadow: 0 0 40px #000; } to { -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5); transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5); text-shadow: 0 0 20px #000; opacity: 0; } }
        @-webkit-keyframes smoky-mirror { 60% { text-shadow: 0 0 40px #000; } to { -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2); transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2); text-shadow: 0 0 20px #000; opacity: 0; } }
        @keyframes smoky-mirror { 60% { text-shadow: 0 0 40px #000; } to { -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2); transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2); text-shadow: 0 0 20px #000; opacity: 0; } }
        .yanwubody span:nth-of-type(1) { -webkit-animation-delay: 3.1s; animation-delay: 3.1s; }
        .yanwubody span:nth-of-type(2) { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; }
        .yanwubody span:nth-of-type(3) { -webkit-animation-delay: 3.3s; animation-delay: 3.3s; }
        .yanwubody span:nth-of-type(4) { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; }
        .yanwubody span:nth-of-type(5) { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; }
        .yanwubody span:nth-of-type(6) { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; }
        .yanwubody span:nth-of-type(7) { -webkit-animation-delay: 3.7s; animation-delay: 3.7s; }
        .yanwubody span:nth-of-type(8) { -webkit-animation-delay: 3.8s; animation-delay: 3.8s; }
        .yanwubody span:nth-of-type(9) { -webkit-animation-delay: 3.9s; animation-delay: 3.9s; }
        .yanwubody span:nth-of-type(10) { -webkit-animation-delay: 4s; animation-delay: 4s; }
        .yanwubody span:nth-of-type(11) { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; }
        .yanwubody span:nth-of-type(12) { -webkit-animation-delay: 4.2s; animation-delay: 4.2s; }
        .yanwubody span:nth-of-type(13) { -webkit-animation-delay: 4.3s; animation-delay: 4.3s; }
        .yanwubody span:nth-of-type(14) { -webkit-animation-delay: 4.4s; animation-delay: 4.4s; }
        .yanwubody span:nth-of-type(15) { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; }
        .yanwubody span:nth-of-type(16) { -webkit-animation-delay: 4.6s; animation-delay: 4.6s; }
        .yanwubody span:nth-of-type(17) { -webkit-animation-delay: 4.7s; animation-delay: 4.7s; }
        .yanwubody span:nth-of-type(18) { -webkit-animation-delay: 4.8s; animation-delay: 4.8s; }
        .yanwubody span:nth-of-type(19) { -webkit-animation-delay: 4.9s; animation-delay: 4.9s; }
        .yanwubody span:nth-of-type(20) { -webkit-animation-delay: 5s; animation-delay: 5s; }
        .yanwubody span:nth-of-type(21) { -webkit-animation-delay: 5.1s; animation-delay: 5.1s; }
    </style>
</div>

